<template>
    <div class="container">
      <el-row class="goods-topbar">
        <el-col :lg="3" :md="3" class="topbar-item">商品图片</el-col>
        <el-col :lg="3" :md="3" class="topbar-item">商品名称</el-col>
        <el-col :lg="2" :md="2" class="topbar-item">商品价格</el-col>
        <el-col :lg="2" :md="2" class="topbar-item">配送费(元)</el-col>
        <el-col :lg="2" :md="2" class="topbar-item">起送费(元)</el-col>
        <el-col :lg="2" :md="2" class="topbar-item">商品销量</el-col>
        <el-col :lg="2" :md="2" class="topbar-item">商品评分</el-col>
        <el-col :lg="3" :md="3" class="topbar-item">创建时间</el-col>
        <el-col :lg="4" :md="4" class="topbar-item">操作</el-col>
      </el-row>
      <div class="goods-wrapper">
        <el-row class="goods-container" v-for="item in 8" key="item">
          <el-col :lg="3" :md="3" class="goods-item">
            <img src="@/images/goods1.jpg" alt="龙身凤尾虾">
          </el-col>
          <el-col :lg="3" :md="3" class="goods-item">
            福建特色菜龙身凤尾虾
          </el-col>
          <el-col :lg="2" :md="2" class="goods-item">29.99</el-col>
          <el-col :lg="2" :md="2" class="goods-item">3.00</el-col>
          <el-col :lg="2" :md="2" class="goods-item">50</el-col>
          <el-col :lg="2" :md="2" class="goods-item">199</el-col>
          <el-col :lg="2" :md="2" class="goods-item">4.8</el-col>
          <el-col :lg="3" :md="3" class="goods-item">2019年10月14日09:52:44</el-col>
          <el-col :lg="4" :md="4" class="goods-item">

            <el-button type="primary" icon="el-icon-edit" size="small">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" size="small">删除</el-button>
          </el-col>
        </el-row>
      </div>

    </div>
</template>

<script>
  import {Row, Col, Button} from "element-ui"

    export default {
        name: "Index",
        data() {
            return {

            }
        },
        components:{
          elRow:Row,
          elCol:Col,
          elButton:Button
        }
    }
</script>

<style scoped lang="scss">
  .goods-topbar{
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    .topbar-item{
      text-align: center;
    }
  }
  .goods-wrapper{
    margin-top: 15px;
    .goods-container {
      padding-bottom: 15px;
      margin-bottom: 15px;
      border-bottom: 1px solid #eee;
      .goods-item {
        height: 60px;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 60px;
        overflow: hidden;
        text-align: center;
        img {
          -webkit-border-radius: 4px;
          -moz-border-radius: 4px;
          border-radius: 4px;
          height: 60px;
          width: 60px;
        }
      }
  }
  }
</style>
